<script setup lang="ts">
import { NButton } from 'naive-ui';

// 定义组件属性
interface Props {
  userInfo: {
    phone?: string;
    email?: string;
  };
}

// 定义组件事件
interface Emits {
  (e: 'showPhoneDialog'): void;
  (e: 'showEmailDialog'): void;
  (e: 'showPasswordDialog'): void;
}

// 组件属性和事件
const props = withDefaults(defineProps<Props>(), {
  userInfo: () => ({})
});

const emit = defineEmits<Emits>();

// 脱敏显示手机号
const maskPhone = (phone: string): string => {
  return phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '';
};

// 脱敏显示邮箱
const maskEmail = (email: string): string => {
  if (!email) return '';
  const [username, domain] = email.split('@');
  if (username.length <= 2) {
    return `${username.charAt(0)}****@${domain}`;
  }
  const visibleChars = Math.min(2, Math.floor(username.length / 2));
  return `${username.slice(0, visibleChars)}****${username.slice(-1)}@${domain}`;
};

// 显示各功能弹窗
const handleShowPhoneDialog = () => {
  emit('showPhoneDialog');
};

const handleShowEmailDialog = () => {
  emit('showEmailDialog');
};

const handleShowPasswordDialog = () => {
  emit('showPasswordDialog');
};
</script>

<template>
  <div class="account-security-container">
    <div class="security-item">
      <div class="security-label">
        <span class="label-text">手机号</span>
        <span class="security-status">{{ userInfo.phone ? '已绑定' : '未绑定' }}</span>
      </div>
      <NButton type="primary" @click="handleShowPhoneDialog">{{ userInfo.phone ? '更换' : '绑定' }}手机号</NButton>
    </div>
    <div class="security-divider"></div>
    <div class="security-item">
      <div class="security-label">
        <span class="label-text">邮箱</span>
        <span class="security-status">{{ userInfo.email ? maskEmail(userInfo.email) : '未绑定' }}</span>
      </div>
      <NButton type="primary" @click="handleShowEmailDialog">{{ userInfo.email ? '更换' : '绑定' }}邮箱</NButton>
    </div>
    <div class="security-divider"></div>
    <div class="security-item">
      <div class="security-label">
        <span class="label-text">密码</span>
        <span class="security-status">建议定期更换密码</span>
      </div>
      <NButton type="primary" @click="handleShowPasswordDialog">修改密码</NButton>
    </div>
  </div>
</template>

<style scoped lang="scss">
.account-security-container {
  width: 100%;
}

// 安全项样式
.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 0 -12px;
  padding: 20px 12px;

  &:hover {
    background-color: #fafafa;
    transform: translateX(4px);
  }
}

.security-label {
  display: flex;
  align-items: center;
  gap: 16px;

  .label-text {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  .security-status {
    font-size: 14px;
    color: #666;
    padding: 4px 12px;
    background: #f0f0f0;
    border-radius: 16px;
    transition: all 0.3s ease;

    &.bound {
      background: #f6ffed;
      color: #52c41a;
      border: 1px solid #b7eb8f;
    }

    &.unbound {
      background: #fff2e8;
      color: #fa8c16;
      border: 1px solid #ffd591;
    }
  }
}

.security-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #f0f0f0, transparent);
  margin: 0;
}

// 按钮样式
.n-button {
  transition: all 0.3s ease;
  border-radius: 6px;
  font-weight: 500;

  &.primary {
    background: linear-gradient(135deg, #1890ff, #40a9ff);
    border: none;

    &:hover:not(:disabled) {
      background: linear-gradient(135deg, #40a9ff, #69c0ff);
      box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .security-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 0;
    margin: 0 -8px;
    padding: 16px 8px;

    &:hover {
      transform: translateX(2px);
    }
  }

  .security-label {
    gap: 12px;

    .label-text {
      font-size: 15px;
    }
  }

  .security-item .n-button {
    margin-top: 12px;
    width: 100%;
  }
}
</style>
